<template>
  <div class="hello">
    <div class="login-header">
      <a  :class="{select:zhuangtai}" @click="ZhaungtaiClick()">已有账号登录 <span v-if="zhuangtai" ></span></a>
      <a :class="{select:!zhuangtai}" @click="ZhaungtaiClick()">手机快捷登录 <span v-if="!zhuangtai"></span></a>
    </div>

    <!--手机号登录-->
    <div class="login-number clearfix " v-if="zhuangtai" >
      <ul class="borBttom">
        <li class="float_lf">
          <i >
            <img src="../assets/images/login_phone_icon@2x.png" width="100%" alt=""/>
          </i>
          账号
        </li>
        <li class="float_lf">
          <input type="text" name="phone_number" v-model="phone_number" @blur="phoneYan" placeholder="请输入手机号码"/>
        </li>
      </ul>
      <ul class="borBttom">
        <li class="float_lf">
          <i class="upwds">
            <img src="../assets/images/login_password_icon@2x.png" width="100%" alt=""/>
          </i>
          密码
        </li>
        <li class="float_lf">
          <input type="password" name="pass_word" v-model="pass_word" @blur="passYan" placeholder="请输入密码"/>
        </li>
      </ul>
    </div>
    <!--快捷手机登陆-->
    <div class="login-rapid" v-if="!zhuangtai" >
      <form class="forget">
        <ul class="borBttom">
          <li class="float_lf">
            <i class="upwds" >
              <img src="../assets/images/login_phone_icon@2x.png" width="100%" alt=""/>
            </i>
          </li>
          <li class="float_lf">
            <input type="text" name="phone_number_reg" v-model="phone_number" @blur="phoneYan" placeholder="请输入手机号码"/>
            <button class="get_code" @click="getCode($event)" :disabled="!show">
              {{miao}}
            </button>
          </li>
        </ul>
        <ul class="borBttom">
          <li class="float_lf">
            <i class="upwds">
              <img src="../assets/images/login_captcha_icon@2x.png" width="100%" alt=""/>
            </i>

          </li>
          <li class="float_lf">
            <input type="password" name="password1" v-model=" yanzhengma" placeholder="请输入验证码"/>
          </li>
        </ul>
      </form>
    </div>
    <!--登录按钮-->
    <div class="btn-login" @click="login" >
      <button >
        登录
      </button>
    </div>
    <p class="login-text">
      <a @click="handleClick()">注册账号</a>
      <!--<i></i>-->
      <!--<a href="#" class="fontCd329">忘记密码</a>-->
    </p>


    <footer class="login-footer">{{this.$store.state}}
      <p>客服电话：<a href="tel:400-8787-923" class="fontCd329">400-8787-923</a></p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      zhuangtai:true, //if true  账号登陆 else 快捷登陆
      //验证
      phone_ok:false,
      //账号登陆
      phone_number:'',
      pass_word:'',
      //秒数
      miao:'获取验证码',
      show:true,
      yanzhengma:"",
      yanzhengmas:""
    }
  },
  methods:{
    ZhaungtaiClick(){
      if(this.zhuangtai){
        this.zhuangtai=false;
      }else{
        this.zhuangtai=true;
      }
    },
    phoneYan(){
      let phone=this.phone_number;
      if(!(/^1[3|4|5|8|7|2][0-9]\d{8}$/.test(phone))) {
        this.$layer.msg("手机号码错误");
        this.phone_number=''
        }else{
        this.phone_ok=true;
      }
      },
    passYan(){
        let password=this.pass_word;
      if(password.length<6||password.length>16){
        // alert('手机号不匹配正则');
        this.$layer.msg('请输入正确的密码');
      }
    },
    login(){
      let beready = true;	//防止重复点击
      this.$layer.msg("登陆中");
      if(this.zhuangtai&&this.phone_ok){
          this.$http.post(
            "http://api.mayinvwang.com/index.php/AppjsonPublic/login",
            {phone:this.phone_number,password:this.pass_word}
          ).then(function (res) {
//            this.$layer.msg("成功");
            console.log(res);
            sessionStorage['user_id']=res.data.user_id;
            sessionStorage['phone']=this.phone_number;
            this.$store.commit('mutationName',{user_id:res.data.user_id,phone:this.phone_number})
            this.$router.push( {path:'/chaxun'})

          },function (res) {
            console.log(res)
          })
      }else if(!this.zhuangtai && this.phone_ok){
        if(this.yanzhengma!=this.yanzhengmas){

          return this.$layer.msg("验证码错误");
        }
        this.$http.post('http://api.mayinvwang.com/index.php/AppjsonPublic/verifyLogin',
          {phone:this.phone_number,verify:this.yanzhengma}
        ).then(
          (res)=>{
            console.log(res)
            sessionStorage['user_id']=res.data.user_id;
            sessionStorage['phone']=this.phone_number;
            this.$store.commit('mutationName',{user_id:res.data.user_id,phone:this.phone_number})
            this.$router.push( {path:'/chaxun'})
          },
          (res)=>{}
        )
      }
    }
    ,getCode(e){
      if(!this.phone_ok)return
      this.show=false;
       var beclick=true;
      if(!beclick) return;
       beclick = false;
       this.$http.post("http://api.mayinvwang.com/index.php/AppjsonPublic/verify",
      {phone:this.phone_number}
      ).then(
         (res)=>{
           console.log(res.data.verify);
           this.yanzhengmas=res.data.verify;
           var a=60;
           var timer1=setInterval(()=>{
             a--;
             this.miao=a+"重新获取";
             if(a < 0){
               clearInterval(timer1);
               this.show=true;
               beclick = true;
               this.miao="获取验证码";
             }
           },1000);
         },
         (res)=>{}
       )
    },
    GetQueryString(name) {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)return  unescape(r[2]); return null;
          },
    handleClick() {
      this.$store.commit('mutationName','1234567')
    }
  },
  computed:{

  },
  created:function(){
   console.log( this.GetQueryString('token'))
    sessionStorage['token']=this.GetQueryString('token')
    this.$store.commit('tokenName',this.GetQueryString('token'))
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
